<template>
	<div class="div">
		<div class="div2">
			<h5>热度图片添加-添加</h5>
			<el-button style="color:#7dd7ff;border: none;">返回列表</el-button>
			<el-button style="color:#7dd7ff;border: none;" @click="addHot()">保存....</el-button>
			<h6>类型自定义，获取时指定类型&nbsp;1=轮播图&nbsp;2=广告图</h6>
		</div>
		<hr>
		<div class="div3">
			<div class="div4">
				<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
					:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange"
					action="uploadAction" list-type="picture" accept="image/jpg,image/jpeg">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>
			<div class="div5">
				<el-form :ref="hot" :model="hot" label-width="100px">
					<el-form-item label="类型-整数">
						<el-input v-model="hot.type"></el-input>
						<p>类型可自定义&nbsp;1=轮播图&nbsp;2=广告....</p>
					</el-form-item>
					
					<el-form-item label="优先级-整数">
						<el-input v-model="hot.hot"></el-input>
						<p>数字越大,显示在前面</p>
					</el-form-item>
					
					<el-form-item label="描述">
						<el-input
						  type="textarea"
						  :rows="2"
						  placeholder="请输入内容"
						  v-model="hot.memo">
						</el-input>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'addHot',
		data() {
			return {
				hot:{},
				fileList: [],
				loading: false,
				imageUrl: ""
			}
		},
		methods: {
			handleChange: function(file, fileList) {
				this.fileList = fileList;
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 512;

				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 0.5MB!');
				}
				return isJPG && isLt2M;
			},
			addHot(){
				let fd=new FormData();
				fd.append("type",this.hot.type);
				fd.append("hot",this.hot.hot);
				fd.append("memo",this.hot.memo);
				let content =this.fileList[0].raw;
				fd.append("pic",content);
				console.log(fd);
				this.$postf("/api/adm/hot/add",fd).then((resp) => {
					console.log(resp.data);
					this.hot = resp.data.data;
					console.log(this.hot);
				})
			}
		}
	}
</script>

<style scoped>
	.div {
		width: 100%;
	}

	.div .div2 {
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.div hr {
		border: 1px solid #1E9FFF;
		width: 95%;
		margin: 0 auto;
	}

	.div .div3 {
		width: 95%;
		display: flex;
		margin-top: 2vh;
		margin: 0 auto;
	}

	.div .div3 .div4 {
		width: 40%;
	}
	.div .div3 .div5{
		margin-left: 15vw;
		width: 60%;
		margin-top: 2vh;
	}

	.div3 .div4 .avatar-uploader {
		border: 1px solid #d9d9d9;
		
		height: 100%;
		margin-top: 6vh;
		margin-left: 7vw;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height:178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.div3 .div5 .el-input{
		width: 90%;
	}
</style>
